<template>
  <el-card class="user-card" shadow="hover">
    <div class="card-content">
      <!-- 用户基本信息 -->
      <div class="user-header">
        <el-avatar :size="64" :src="user.avatar" class="user-avatar" />
        <div class="user-meta">
          <h3 class="nickname">{{ user.nickName }}</h3>
          <div class="stats">
            <span class="stat-item">
              <el-icon><Collection /></el-icon>
              {{ user.libraryCount || 0 }} 个知识库
            </span>
          </div>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { Collection } from '@element-plus/icons-vue'

const router = useRouter()
const props = defineProps({
  user: {
    type: Object,
    required: true,
    default: () => ({
      userId: '',
      nickName: '未知用户',
      avatar: '',
      libraryCount: 0
    })
  }
})
</script>

<style scoped>
.user-card {
  margin: 12px;
  transition: transform 0.2s;
}

.user-card:hover {
  transform: translateY(-3px);
}

.card-content {
  padding: 16px;
}

.user-header {
  display: flex;
  align-items: center;
}

.user-avatar {
  margin-right: 20px;
}

.user-meta {
  flex: 1;
}

.nickname {
  margin: 0 0 8px 0;
  font-size: 1.4em;
  color: #303133;
}

.stats {
  display: flex;
  gap: 20px;
}

.stat-item {
  display: flex;
  align-items: center;
  color: #606266;
  font-size: 0.95em;
}

.stat-item el-icon {
  margin-right: 6px;
  font-size: 1.1em;
}
</style>
